<!DOCTYPE html>
<html lang="en">
      <head>
            <title>Document</title>
            <style>
                  #e {
                        width: 100px;
                        height: 100px;
                        background: red;
                        position: absolute;
                        left: 0;
                        top: 0;
                        zoom: 1;
                  }
            </style>
      </head>
      <body>
            <div id="e"></div>
            <script>
                  var e = document.getElementById('e');
                  var flag = true;
                  var left = 0;
                  var rafId = null;

                  function render() {
                        if (flag == true) {
                              if (left >= 100) {
                                    flag = false;
                              }
                              e.style.left = ` ${left++}px`;
                        } else {
                              if (left <= 0) {
                                    flag = true;
                              }
                              e.style.left = ` ${left--}px`;
                        }
                  }

                  //requestAnimationFrame效果
                  (function animloop(time) {
                        console.log(time, Date.now());
                        render();
                        rafId = requestAnimationFrame(animloop);
                        //如果left等于50 停止动画
                        // if (left == 50) {
                        //       cancelAnimationFrame(rafId);
                        // }
                  })();

                  //setInterval效果
                  // setInterval(function(){
                  //     render()
                  // },1000/60)
            </script>
      </body>
</html>
